<template>
	<view class="modal-box">
		<u-transition :show="show" mode="fade" :duration="300">
			<u-modal :show="show" title="" :showCancelButton="false" :showConfirmButton="false"
				:closeOnClickOverlay="true" @close="close">
				<view class="content">
					<view class="text">
						{{describe}}
					</view>
				</view>
				<view class="btn-box">
					<view>
						<u-button customStyle="border-radius:12rpx" text="取消" color="linear-gradient(90deg, #b5b5b5 0%, #ffd5dd 100%)" @click="close"></u-button>
					</view>
					<view><sysButton :text="confirmText" :handleChange="confirm"></sysButton></view>
				</view>
				<!-- <u-icon name="close-circle-fill" size="34" color="#ffffff" @click="close"></u-icon> -->
			</u-modal>
		</u-transition>
	</view>
</template>

<script>
	import sysButton from '@/components/sysButton/index.vue'
	export default {
		components: {
			sysButton
		},
		props: {
			show: {
				type: Boolean,
				defaultValue: false
			},
			title: {
				type: String,
				default: ''
			},
			describe: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			closeText: {
				type: String,
				default: '取消'
			},
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				this.$emit('close');
			},
			confirm() {
				this.$emit('confirm',true);
				this.close()
			}
		},
		options: {
			styleIsolation: 'shared'
		}
	}
</script>

<style lang="scss" scoped>
	.modal-box {
		::v-deep .u-popup__content {
			border-radius: 40rpx !important;
			overflow: inherit !important;
			background-color: #1C1E23;
		}
		
		::v-deep .u-modal__title{
			color: #ffffff;
		}

		::v-deep .u-modal__content {
			display: block !important;
		}

		.content {
			width: 100%;
			display: block;
			text-align: center;
			padding: 40rpx 0;
			color: #ffffff;
			text{
				color: #ffffff;
			}
		}

		::v-deep .u-icon {
			position: absolute;
			bottom: -100rpx;
			left: calc(50% - 17px);
		}
	}
	
	.btn-box{
		display: flex;
		justify-content: space-between;
		view{
			width: calc(50% - 10rpx);
		}
		::v-deep .u-button{
			height: 88rpx;
		}
	}
</style>